<template>
  <div>
    <div class="page-header">
      <div class="page-header-index-wide">
        <a-breadcrumb style="margin-bottom: 15px;">
          <a-breadcrumb-item><router-link to="/landCenter/railerManagement">挂车管理</router-link></a-breadcrumb-item>
          <a-breadcrumb-item>车辆详情</a-breadcrumb-item>
        </a-breadcrumb>

        <div class="detail">
          <div class="main">
            <a-form-model
              ref="form0"
              :model="form0"
              :rules="rules"
              layout="inline"
              >
              <div class="row" style="margin-bottom:8px;">
                <img src="/static/images/driver.png" class="logo"/>
                <div class="title">
                  <div v-if="editpart0.flag"><h1>车牌号：{{detail.truckNumber}}</h1></div>
                  <div v-if="!editpart0.flag">
                    <a-form-model-item prop="truckNumber" label="车牌号">
                      <a-input v-model="form0.truckNumber" :max-length="7"/>
                    </a-form-model-item>
                  </div>
                </div>
                <div class="action">
                  <a-button v-if="!editpart0.flag" @click="editpartHandle(0, true)">取消</a-button>
                  <a-button type="primary" class="cardEdit" @click="editpartHandle(0, false)">{{editpart0.text}}</a-button>
                </div>
              </div>
              <div class="row">
                <div class="headerContent">
                  <detail-list v-if="editpart0.flag" :col="2" class="detail-layout">
                    <detail-list-item term="品牌型号">{{detail.brandName}}</detail-list-item>
                    <detail-list-item term="车辆类型">{{detail.typeName}}</detail-list-item>
                    <detail-list-item term="所属车队">{{detail.custName}}</detail-list-item>
                  </detail-list>
                  <a-row style="marginLeft: 44px;" v-if="!editpart0.flag">
                    <a-col :span="12">
                      <a-form-model-item prop="brandId" label="品牌型号">
                        <a-select class="selectWidth" show-search v-model="form0.brandId">
                          <a-select-option value="">请选择</a-select-option>
                          <a-select-option v-for="c in brandList" :key="c.dictionaryId">{{c.name}}</a-select-option>
                        </a-select>
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-model-item prop="typeId" label="车辆类型">
                        <a-select class="selectWidth" v-model="form0.typeId">
                          <a-select-option value="">请选择</a-select-option>
                          <a-select-option v-for="c in typeList" :key="c.dictionaryId">{{c.name}}</a-select-option>
                        </a-select>
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="12">
                      <a-form-model-item label="所属车队" prop="custId">
                        <a-select style="min-width: 200px"
                          show-search
                          :show-arrow="false"
                          :filter-option="false" :default-active-first-option="false"
                          :not-found-content="null"
                          :value="form0.custName"
                          @search="handleNameChange"
                          @select="handleSelect"
                        >
                          <a-select-option value="">请选择</a-select-option>
                          <a-select-option v-for="(d, index) in custIdList" :key="index">{{ d.name }}</a-select-option>
                        </a-select>
                      </a-form-model-item>
                    </a-col>
                  </a-row>
                </div>
                <div class="extra">
                  <a-row class="status-list">
                    <a-col :span="24">
                      <div v-if="editpart0.flag" class="text">状态</div>
                      <div v-if="editpart0.flag" class="heading">{{statusStr}}</div>
                      <div v-if="!editpart0.flag" class="heading">
                        <a-form-model-item label="状态" prop="status">
                          <a-select class="selectWidth" v-model="form0.status">
                            <a-select-option :key="1">正常</a-select-option>
                            <a-select-option :key="0">冻结</a-select-option>
                          </a-select>
                        </a-form-model-item>
                      </div>
                    </a-col>
                  </a-row>
                </div>
              </div>
            </a-form-model>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="page-menu-tabs">
        <a-tabs :tabBarStyle="{}">
          <a-tab-pane tab="车辆信息" key="1">
            <div class="content">
              <div class="page-header-index-wide">
                <a-card :bordered="false">
                  <a-form-model
                    ref="form1"
                    :model="form1"
                    :rules="rules"
                    :label-col="labelCol2"
                    :wrapper-col="wrapperCol2"
                  >
                    <a-button v-if="!editpart1.flag" class="cardCancel" @click="editpartHandle(1, true)">取消</a-button>
                    <a-button type="primary" class="cardEdit" @click="editpartHandle(1, false)">{{editpart1.text}}</a-button>
                    <div class="card-title">车辆档案</div>
                    <a-row v-if="editpart1.flag">
                      <a-col :span="24">
                        <detail-list>
                          <detail-list-item term="核定载质量" class="terDeta1">{{detail.nuclearLoadMass}}kg</detail-list-item>
                          <detail-list-item term="下次保养日期" class="terDeta1">{{detail.maintenanceTime}}</detail-list-item>
                          <detail-list-item term="整备质量" class="terDeta1">{{detail.kerbMass}}kg</detail-list-item>
                          <!-- <detail-list-item term="下次年检日期" class="terDeta1">{{detail.inspectionTime}}</detail-list-item> -->
                          <detail-list-item term="总质量" class="terDeta1">{{detail.totalMass}}kg</detail-list-item>
                          <detail-list-item term="下次年审日期" class="terDeta1">{{detail.reviewTime}}</detail-list-item>
                        </detail-list>
                      </a-col>
                    </a-row>
                    <a-row v-if="!editpart1.flag">
                      <a-col :span="8" class="terDeta1">
                        <a-form-model-item prop="nuclearLoadMass" label="核定载质量(kg)">
                          <a-input-number v-model="form1.nuclearLoadMass" :min="0" :max="999999" style="width: 100%"/>
                        </a-form-model-item>
                      </a-col>
                      <a-col :span="8" class="terDeta1">
                        <a-form-model-item prop="maintenanceTime" label="下次保养时间">
                          <a-date-picker :default-value="momentDate(this.detail.maintenanceTime)" @change="onChangeMaintenanceTime" style="width: 100%"/>
                        </a-form-model-item>
                      </a-col>
                      <a-col :span="8" class="terDeta1">
                        <a-form-model-item prop="kerbMass" label="整备质量(kg)">
                          <a-input-number v-model="form1.kerbMass" :min="0" :max="999999" style="width: 100%"/>
                        </a-form-model-item>
                      </a-col>
                      <!-- <a-col :span="8" class="terDeta1">
                        <a-form-model-item prop="inspectionTime" label="下次年检时间">
                          <a-date-picker :default-value="momentDate(this.detail.inspectionTime)" @change="onChangeInspectionTime" style="width: 100%"/>
                        </a-form-model-item>
                      </a-col> -->
                      <a-col :span="8" class="terDeta1">
                        <a-form-model-item prop="totalMass" label="总质量(kg)">
                          <a-input-number v-model="form1.totalMass" :min="0" :max="999999" style="width: 100%"/>
                        </a-form-model-item>
                      </a-col>
                      <a-col :span="8" class="terDeta1">
                        <a-form-model-item prop="reviewTime" label="下次年审时间">
                          <a-date-picker :default-value="momentDate(this.detail.reviewTime)" @change="onChangeReviewTime" style="width: 100%" />
                        </a-form-model-item>
                      </a-col>
                    </a-row>
                  </a-form-model>
                </a-card>

                <a-card :bordered="false">
                  <a-form-model
                    ref="form2"
                    :model="form2"
                    :rules="rules"
                    :label-col="labelCol"
                    :wrapper-col="wrapperCol"
                  >
                    <a-button v-if="!editpart2.flag" class="cardCancel" @click="editpartHandle(2, true)">取消</a-button>
                    <a-button type="primary" class="cardEdit" @click="editpartHandle(2, false)">{{editpart2.text}}</a-button>
                    <div class="card-title">车辆行驶证</div>
                    <a-row>
                      <a-col :span="12" v-if="editpart2.flag">
                        <detail-list :col="1">
                          <detail-list-item term="车辆识别代号" class="terDeta">{{detail.vin}}</detail-list-item>
                          <detail-list-item term="行驶证到期日期" class="terDeta">{{detail.drivingPermitExpireTime}}</detail-list-item>
                        </detail-list>
                      </a-col>
                      <a-col :span="12" v-if="!editpart2.flag">
                        <a-form-model-item prop="vin" label="车辆识别代号">
                          <a-input v-model="form2.vin" :max-length="20"/>
                        </a-form-model-item>
                        <a-form-model-item prop="drivingPermitExpireTime" label="行驶证到期日期">
                          <a-date-picker :default-value="momentDate(this.detail.drivingPermitExpireTime)" @change="onChangeDrivingPermitExpireTime" style="width: 100%"/>
                        </a-form-model-item>
                      </a-col>
                      <a-col :span="12">
                        <a-form-model-item prop="drivingPermitPics1" style="float: left;">
                          <upload-identity-card identityCardField="drivingPermitPics1" identityCardText="上传行驶证" :url="drivingPermitPics1Str" :disabled="editpart2.flag" @success="fileSuccess" style="margin: 4px 20px 0px 0px;"/>
                        </a-form-model-item>
                        <a-form-model-item prop="drivingPermitPics2" style="float: left;">
                          <upload-identity-card identityCardField="drivingPermitPics2" identityCardText="上传行驶证" :url="drivingPermitPics2Str" :disabled="editpart2.flag" @success="fileSuccess" style="margin: 4px 20px 0px 0px;"/>
                        </a-form-model-item>
                      </a-col>
                    </a-row>
                  </a-form-model>
                </a-card>

                <a-card :bordered="false">
                  <a-form-model
                    ref="form3"
                    :model="form3"
                    :rules="rules"
                    :label-col="labelCol"
                    :wrapper-col="wrapperCol"
                  >
                    <a-button v-if="!editpart3.flag" class="cardCancel" @click="editpartHandle(3, true)">取消</a-button>
                    <a-button type="primary" class="cardEdit" @click="editpartHandle(3, false)">{{editpart3.text}}</a-button>
                    <div class="card-title">道路运输经营许可证</div>
                    <a-row>
                      <a-col :span="12" v-if="editpart3.flag">
                        <detail-list :col="1">
                          <detail-list-item term="道路运营证字号" class="terDeta">{{detail.operationCertificate}}</detail-list-item>
                          <detail-list-item term="证件有效期" class="terDeta">{{detail.operationCertificateBeginTime}}~{{detail.operationCertificateEndTime}}</detail-list-item>
                          <detail-list-item term="证件年审日期" class="terDeta">{{detail.operationCertificateReviewTime}}</detail-list-item>
                        </detail-list>
                      </a-col>
                      <a-col :span="12" v-if="!editpart3.flag">
                        <a-form-model-item prop="operationCertificate" label="道路运营证字号">
                          <a-input v-model="form3.operationCertificate" :max-length="20"/>
                        </a-form-model-item>
                        <a-form-model-item prop="operationCertificateBeginTime" label="道路运营证有效期">
                          <a-range-picker :default-value="[momentDate(this.detail.operationCertificateBeginTime), momentDate(this.detail.operationCertificateEndTime)]" @change="onChangeOperationCertificateBeginTime" style="width: 100%"><a-icon slot="suffixIcon" type="calendar" /></a-range-picker>
                        </a-form-model-item>
                        <a-form-model-item prop="operationCertificateReviewTime" label="证件年审日期">
                          <a-date-picker :default-value="momentDate(this.detail.operationCertificateReviewTime)" @change="onChangeOperationCertificateReviewTime" style="width: 100%" />
                        </a-form-model-item>
                      </a-col>
                      <a-col :span="12">
                        <a-form-model-item prop="operationCertificatePics1" style="float: left;">
                          <upload-identity-card identityCardField="operationCertificatePics1" identityCardText="上传营运证" :url="operationCertificatePics1Str" :disabled="editpart3.flag" @success="fileSuccess" style="margin: 4px 20px 0px 0px;"/>
                        </a-form-model-item>
                        <a-form-model-item prop="operationCertificatePics1" style="float: left;">
                          <upload-identity-card identityCardField="operationCertificatePics1" identityCardText="上传营运证" :url="operationCertificatePics2Str" :disabled="editpart3.flag" @success="fileSuccess" style="margin: 4px 20px 0px 0px;"/>
                        </a-form-model-item>
                      </a-col>
                    </a-row>
                  </a-form-model>
                </a-card>
              </div>
            </div>
          </a-tab-pane>

          <a-tab-pane tab="车辆保险" key="2">
            <a-card :bordered="false">
              <div class="card-title">保险档案</div>
              <truck-insurance-record :id="id"/>
            </a-card>
          </a-tab-pane>

          <a-tab-pane tab="更换记录" key="3">
            <a-card :bordered="false">
              <div class="card-title">更换记录</div>
                <railer-change-record :truck-id="id" />
            </a-card>
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>
</div>
</template>

<script>
import debounce from 'lodash/debounce'
import {queryCustNameList} from '@/api'
import moment from 'moment'
import DetailList from '@/components/DescriptionList'
import UploadIdentityCard from '@/components/UploadIdentityCard'
import TruckInsuranceRecord from '../tractorAndRailerDetailTab2'
import TruckChangeRecord from './railerDetailTab3'

import { queryDataDictionaryDown, queryTractorInfo, updateTruckInfo } from '@/api/landCenter'

const DetailListItem = DetailList.Item
const fomrMessage = `必填项不能为空`
// TRUCK_TYPE:车辆类型 TRUCK_BRAND:车辆品牌型号
const TRUCK_TYPE = 'TRUCK_TYPE'
const TRUCK_BRAND = 'TRUCK_BRAND'
const buttonDefault = { text: '编辑', flag: true }
const buttonEdit = { text: '保存', flag: false, saveLoading: false }

export default {
  props: ['id'],
  components: {
    DetailList,
    DetailListItem,
    [UploadIdentityCard.name]: UploadIdentityCard,
    [TruckInsuranceRecord.name]: TruckInsuranceRecord,
    [TruckChangeRecord.name]: TruckChangeRecord
  },
  data () {
    this.handleNameChange = debounce(this.handleNameChange, 800)
    return {
      labelCol: { span: 6 },
      labelCol2: { span: 10 },
      wrapperCol: { span: 16 },
      wrapperCol2: { span: 14 },
      // part 0
      custIdList: [], // 车队
      typeList: [], // 车辆类型
      brandList: [], // 品牌型号
      form0: {
        truckNumber: '', // 车牌号
        isSelfOperation: 1,
        typeId: '', // 车辆类型
        brandId: '', // 品牌id
        custId: '',
        custName: '',
        status: null
      },
      // part 1
      form1: {
        nuclearLoadMass: '', // 核定载质量
        totalMass: '', // 总质量
        kerbMass: '', // 整备质量
        // inspectionTime: null, // 下次年检日期
        maintenanceTime: null, // 下次保养日期
        reviewTime: null // 下次年审日期
      },
      // part 2
      form2: {
        vin: '', // 车辆识别号
        drivingPermitExpireTime: null, // 行驶证到期日期
        drivingPermitPics: '', // 行驶证
        drivingPermitPics1: '',
        drivingPermitPics2: ''
      },
      // part 3
      form3: {
        operationCertificate: '', // 车辆营运证号码
        operationCertificateBeginTime: null, // 车辆营运证生效日期
        operationCertificateEndTime: null, // 车辆营运证到期日期
        operationCertificateReviewTime: null, // 营运证年审日期
        operationCertificatePics: '',
        operationCertificatePics1: '',
        operationCertificatePics2: ''
      },
      detail: {
        custId: '', // 客户（车队）id
        typeId: '', // Integer车辆类型id
        truckNumber: '', // 车牌号
        brandId: '', // 品牌id
        typeName: '',
        brandName: '',
        nuclearLoadMass: '', // 核定载质量
        totalMass: '', // 总质量
        kerbMass: '', // 整备质量
        // inspectionTime: null, // 下次年检日期
        maintenanceTime: null, // 下次保养日期
        reviewTime: null, // 下次年审日期
        vin: '', // 车辆识别号
        drivingPermitExpireTime: null, // 行驶证到期日期
        drivingPermitPics: '', // 行驶证图
        operationCertificate: '', // 车辆营运证号码
        operationCertificateBeginTime: null, // 车辆营运证生效日期
        operationCertificateEndTime: null, // 车辆营运证到期日期
        operationCertificateReviewTime: null, // 营运证年审日期
        operationCertificatePics: '' // 营运证图片
      },
      editpart0: buttonDefault,
      editpart1: buttonDefault,
      editpart2: buttonDefault,
      editpart3: buttonDefault,
      rules: {
        typeId: [{required: true, message: fomrMessage, trigger: ['blur', 'change']}],
        kerbMass: [{required: true, message: fomrMessage, trigger: 'blur'}],
        truckNumber: [{required: true, message: fomrMessage, trigger: 'blur'}],
        brandId: [{required: true, message: fomrMessage, trigger: ['blur', 'change']}],
        custId: [{required: true, message: fomrMessage, trigger: ['blur', 'change']}],
        // inspectionTime: [{required: true, message: fomrMessage, trigger: ['blur', 'change']}],
        nuclearLoadMass: [{required: true, message: fomrMessage, trigger: 'blur'}],
        maintenanceTime: [{required: true, message: fomrMessage, trigger: ['blur', 'change']}],
        totalMass: [{required: true, message: fomrMessage, trigger: 'blur'}],
        reviewTime: [{required: true, message: fomrMessage, trigger: ['blur', 'change']}],
        vin: [{required: true, message: fomrMessage, trigger: 'blur'}, {message: '只能输入字母和数字', pattern: /^[a-zA-Z0-9]+$/, trigger: 'blur'}],
        operationCertificate: [{required: true, message: fomrMessage, trigger: 'blur'}, {message: '只能输入字母和数字', pattern: /^[a-zA-Z0-9]+$/, trigger: 'blur'}],
        drivingPermitExpireTime: [{required: true, message: fomrMessage, trigger: ['blur', 'change']}],
        drivingPermitPics1: [{required: true, message: fomrMessage, trigger: 'blur'}],
        drivingPermitPics2: [{required: true, message: fomrMessage, trigger: 'blur'}],
        operationCertificateReviewTime: [{required: true, message: fomrMessage, trigger: ['blur', 'change']}],
        operationCertificatePics1: [{required: true, message: fomrMessage, trigger: 'blur'}],
        operationCertificatePics2: [{required: true, message: fomrMessage, trigger: 'blur'}]
      }
    }
  },
  computed: {
    statusStr () {
      return this.detail.status === 1 ? '正常' : (this.detail.status === 0 ? '冻结' : '')
    },
    drivingPermitPics1Str () {
      return ~this.detail.drivingPermitPics.indexOf(',') ? this.detail.drivingPermitPics.split(',')[0] : ''
    },
    drivingPermitPics2Str () {
      return ~this.detail.drivingPermitPics.indexOf(',') ? this.detail.drivingPermitPics.split(',')[1] : ''
    },
    operationCertificatePics1Str () {
      return ~this.detail.operationCertificatePics.indexOf(',') ? this.detail.operationCertificatePics.split(',')[0] : ''
    },
    operationCertificatePics2Str () {
      return ~this.detail.operationCertificatePics.indexOf(',') ? this.detail.operationCertificatePics.split(',')[1] : ''
    }
  },
  created () {
    queryTractorInfo({truckId: this.id}).then(rsp => {
      this.detail = Object.assign({}, this.detail, rsp.data)

      this.combineObjCommons(this.form0, rsp.data)
      this.combineObjCommons(this.form1, rsp.data)
      this.combineObjCommons(this.form2, rsp.data)
      this.form2.drivingPermitPics1 = this.drivingPermitPics1Str
      this.form2.drivingPermitPics2 = this.drivingPermitPics2Str

      this.combineObjCommons(this.form3, rsp.data)
      this.form3.operationCertificatePics1 = this.drivingPermitPics1Str
      this.form3.operationCertificatePics2 = this.drivingPermitPics2Str
    })
  },
  methods: {
    handleNameChange (nameLike = '') { // 车队
      queryCustNameList({
        nameLike,
        belongCompany: 'JIA_TE',
        custTypeLike: 'SELF_TEAM',
        status: 1
      }).then(rsp => {
        this.custIdList = rsp.data
      })
    },
    handleSelect (index) {
      this.form0.custId = this.custIdList[index].id
      this.form0.custName = this.custIdList[index].name
      this.handleNameChange()
    },
    initListData () {
      queryDataDictionaryDown({type: TRUCK_TYPE}).then(rsp => {
        this.typeList = rsp.data
      })

      queryDataDictionaryDown({type: TRUCK_BRAND}).then(rsp => {
        this.brandList = rsp.data
      })
    },
    combineObjCommons (sm, big) {
      for (let k in sm) {
        sm[k] = big[k]
      }
    },
    // date to moment
    momentDate (date, format) {
      return moment(date)
    },
    // onChangeInspectionTime (date, dateStr) {
    //   this.form1.inspectionTime = dateStr
    // },
    onChangeMaintenanceTime (date, dateStr) {
      this.form1.maintenanceTime = dateStr
    },
    onChangeReviewTime (date, dateStr) {
      this.form1.reviewTime = dateStr
    },
    onChangeDrivingPermitExpireTime (date, dateStr) {
      this.form2.drivingPermitExpireTime = dateStr
    },
    onChangeOperationCertificateBeginTime  (date, dateStr) {
      this.form3.operationCertificateBeginTime = dateStr[0]
      this.form3.operationCertificateEndTime = dateStr[1]
    },
    onChangeOperationCertificateReviewTime (date, dateStr) {
      this.form3.operationCertificateReviewTime = dateStr
    },
    saveFields (data) {
      return updateTruckInfo({truckId: this.id, ...data}).then(rsp => {
        this.detail = Object.assign({}, this.detail, data)
        this.$message.success('保存成功')
      })
    },
    editpartHandle (part, isCancel) {
      if (!this.$root._bc.edit) {
        this.$message.error('您无此权限！')
        return
      }
      if (!this['editpart' + part].flag) {
        if (isCancel) {
          this.combineObjCommons(this['form' + part], this.detail)
          if (part === 2) {
            this.form2.drivingPermitPics1 = this.drivingPermitPics1Str
            this.form2.drivingPermitPics2 = this.drivingPermitPics2Str
          } else if (part === 3) {
            this.form3.operationCertificatePics1 = this.drivingPermitPics1Str
            this.form3.operationCertificatePics2 = this.drivingPermitPics2Str
          }
          this['editpart' + part] = buttonDefault
        } else {
          this.$refs['form' + part].validate(valid => {
            if (valid) {
              this.saveFields(this['form' + part]).then(() => {
                this['editpart' + part] = buttonDefault
              })
            }
          })
        }
      } else {
        if (part === 0) this.initListData()
        this['editpart' + part] = buttonEdit
      }
    },
    fileSuccess (key, url) {
      if (key === 'drivingPermitPics1') {
        this.form2.drivingPermitPics1 = url
        this.form2.drivingPermitPics = this.form2.drivingPermitPics1 + ',' + this.form2.drivingPermitPics2
      } else if (key === 'drivingPermitPics2') {
        this.form2.drivingPermitPics2 = url
        this.form2.drivingPermitPics = this.form2.drivingPermitPics1 + ',' + this.form2.drivingPermitPics2
      } else if (key === 'operationCertificatePics1') {
        this.form3.operationCertificatePics1 = url
        this.form3.operationCertificatePics = this.form3.operationCertificatePics1 + ',' + this.form3.operationCertificatePics2
      } else if (key === 'operationCertificatePics2') {
        this.form3.operationCertificatePics2 = url
        this.form3.operationCertificatePics = this.form3.operationCertificatePics1 + ',' + this.form3.operationCertificatePics2
      }
    }
  },
  mounted () {
    this.handleNameChange()
  }
}
</script>

<style lang="less" scoped>
.page-header {
  background: #fff;
  padding: 12px 24px;

  .breadcrumb {
    margin-bottom: 16px;
  }

  .detail {
    display: flex;

    .main {
      width: 100%;
      flex: 0 1 auto;

      .row {
        display: flex;
        width: 100%;
      }

      .title {
        font-size: 20px;
        font-weight: 500;
        line-height: 28px;
        color: rgba(0, 0, 0, 0.85);
        flex: auto;
        h1{
            color: rgba(0, 0, 0, 0.85);
            font-weight: 600;
            font-size: 20px;
          }
      }
      .logo {
        width: 28px;
        height: 28px;
        border-radius: 4px;
        margin-right: 10px;
      }
      .content,
      .headerContent {
        flex: auto;
        color: rgba(0, 0, 0, 0.45);
        line-height: 22px;

        .link {
          margin-top: 16px;
          line-height: 24px;

          a {
            font-size: 14px;
            margin-right: 32px;
          }
        }
      }
      .extra {
        flex: 0 1 auto;
        margin-left: 88px;
        min-width: 242px;
        text-align: right;
      }
      .action {
        margin-left: 56px;
        min-width: 266px;
        flex: 0 1 auto;
        text-align: right;
        &:empty {
          display: none;
        }
      }
      .page-menu-tabs {
        width: 100%;
        margin: 15px 0 -17px 8px
      }
    }
  }
}
.ant-card {
  position: relative;
  margin: 0 24px 24px 24px;
  border: none;
  .cardEdit {
    position: absolute;
    right: 24px;
    top: 24px;
    z-index: 2;
  }
  .cardCancel{
    position: absolute;
    right: 104px;
    top: 24px;
    z-index: 2;
  }
  .card-title {
    position: relative;
    padding-left: 16px;
    font-size: 18px;
    line-height: 1;
    color: #000;
    margin-bottom: 20px;
    &:before {
      content: "";
      width: 5px;
      height: 18px;
      background: #1890ff;
      border-radius: 4px;
      position: absolute;
      left: 0;
      top: -1px;
    }
  }
  .hasContent {
    margin-bottom: 20px;
  }
}

.detail-layout {
  margin-left: 38px;
}
.text {
  color: rgba(0, 0, 0, .45);
}

.heading {
  color: rgba(0, 0, 0, .85);
  font-size: 20px;
}

.no-data {
  color: rgba(0, 0, 0, .25);
  text-align: center;
  line-height: 64px;
  font-size: 16px;

  i {
    font-size: 24px;
    margin-right: 16px;
    position: relative;
    top: 3px;
  }
}

.ant-form-inline .ant-form-item-with-help {
    margin-bottom: 5px!important
}
</style>
<style lang="less">
 .title .ant-form-item-label label{ font-size: 20px; font-weight: 600;}
 .ant-tabs-bar{ padding:0 24px; background: #fff; margin: 0 0 24px 0; border-bottom: 0;}
 .ant-tabs-nav .ant-tabs-tab{font-size: 16px;}
 .terDeta .term{
   float: left;
   width: 25%;
   line-height: 40px!important;
   margin-right: 0!important;}
  .terDeta  .content{  line-height: 40px!important;}
  .terDeta1{padding-right: 20px;}
  .terDeta1 .term{
   float: left;
   width: 40%;
   line-height: 40px!important;
   margin-right: 0!important;}
  .terDeta1  .content{  line-height: 40px!important;}
 </style>
